<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <div class="container">
        <div>
            <!--展示用户信息-->
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            typr:"get",
            url:"/userinfo",
            success:function(result){
                let screen = document.querySelector("#screen");
                screen.innerHTML = '玩家:'+result.username +'  分数:'+result.score+
                "<br> 比赛场次:"+result.totalCount+"   获胜场数:"+result.winCount
            },
            error:function(){
                alert("获取用户失败");
            }
        });
        //初始话websocket,实现匹配逻辑
        let websocketUrl = 'ws://'+location.host+'/findMatch'
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function(){
            console.log("onopen");
        }
        websocket.onmessage = function(e){
            console.log(e.data);
            //处理服务器返回的响应数据，对开始匹配/结束匹配  对应
            // 解析得到的响应对象. 返回的数据是一个 JSON 字符串, 解析成 js 对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector("#match-button");
            console.log(1);
            if(!resp.ok){
                console.log("游戏大厅接收到失败响应"+resp.reason);
                return;
            }
            if(resp.message == 'startMatch'){
                console.log("进入匹配队列");
                matchButton.innerHTML = '匹配中...(点击停止)';
            }else if(resp.message == 'stopMatch'){
                console.log("离开匹配队列成功");
                matchButton.innerHTML = '开始匹配';
            }else if(resp.message == 'matchSuccess'){
                console.log("匹配成功");
                // location.assign("/game_room.html");
                location.replace("/game_room.html");
            }else if(resp.message == 'repeatConnection'){
                alert("当前检测到多开，请使用其他账号登录");
                console.log("当前检测到多开，请使用其他账号登录");
                // location.assign("/login.html");
                location.replace("/login.html");
            }else{
                console.log("收到非法响应！message="+resp.message)
            }
        }
        websocket.onerror = function(){
            console.log("onerror");
        }
        window.onbeforeunload = function(){
            websocket.onclose();
        }
        websocket.onclose = function(){
            console.log("onclose");
        }

        //匹配按钮获取点击事件
        let matchButton = document.querySelector("#match-button");
        matchButton.onclick = function(){
            //确认websocket连接是否好着
            if(websocket.readyState = websocket.OPEN){
                //发送数据,两种请求：开始匹配/停止匹配
                if(matchButton.innerHTML == '开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message:"startMatch",
                    }));

                }else if(matchButton.innerHTML == '匹配中...(点击停止)'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message:'stopMatch',
                    }));
                }  
            }else{
                alert("连接断开，请重新登录");
                // location.assign("/login.html");
                location.replace("/login.html");
            }
        }
    </script>
</body>
</html>